<template>
  <div class="injector-level-one">
    <div class="level-indicator">层级 1</div>
    <p>从Provider接收的主题: <span :style="{ color: injectedThemeColor }">{{ injectedTheme }}</span></p>
    <button @click="incrementCounter">增加计数 (当前: {{ injectedCounter }})</button>
    
    <!-- 嵌套更深的组件 -->
    <InjectorLevelTwo />
  </div>
</template>

<script setup>
import { inject } from 'vue'
import InjectorLevelTwo from './InjectorLevelTwo.vue'

// 从父级Provider注入数据
const injectedTheme = inject('theme')
const injectedThemeColor = inject('themeColor')
const injectedCounter = inject('counter')
const incrementCounter = inject('incrementCounter')
</script>

<style scoped>
.injector-level-one {
  padding: 15px;
  margin: 15px 0;
  background-color: #f5f5f5;
  border-radius: 6px;
  border-left: 3px solid #3498db;
  position: relative;
}

.level-indicator {
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: #3498db;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
}

button {
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #27ae60;
}
</style>